<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link rel="stylesheet" type="text/css" href="/css/plugins/layui/layui.css"/>
<link href="/css/jquery-select/jquery.searchableSelect.css" rel="stylesheet" type="text/css">
<style>
    .province {
        float: left;
        position: relative;
        width: 150px;
        height: 35px;
        line-height: 35px;
        border: 1px solid #fff;
    }

    .province:hover {
        border: 1px solid #f7e4a5;
        border-bottom: 1px solid #fffec6;
        background: #fffec6;
    }

    .province .cityall {
        margin-top: 10px;
    }

    .province ul {
        list-style: outside none none;
        position: absolute;
        padding: 0;
        background: #fffec6;
        border: 1px solid #f7e4a5;
        display: none;
        width: auto;
        width: 300px;
        z-index: 999999;
        left: -26px;
        top: 33px;
    }

    .province ul li {
        float: left;
        min-width: 60px;
        margin-left: 20px;
        height: 30px;
        line-height: 30px;
    }

    .province .checkbox-inline {
        padding-top: 0;
    }

    h3, h4, h5 {
        margin: 5px 0;
        font-weight: 600;
    }

    input[type=email], input[type=url], input[type=search], input[type=tel],
    input[type=color], input[type=text], input[type=password], input[type=datetime],
    input[type=datetime-local], input[type=date], input[type=month], input[type=time],
    input[type=week], input[type=number], textarea {
        border-radius: 0 !important;
        color: #858585;
        background-color: #FFF;
        border: 1px solid #D5D5D5;
        padding: 5px 4px 6px;
        font-size: 14px;
        font-family: inherit;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        -webkit-transition-duration: .1s;
        transition-duration: .1s;
    }

    .spectable td, .spectable th {
        border: 1px solid #ccc;
        vertical-align: middle;
        text-align: center;
    }

    .spectable th {
        font-weight: bold;
    }

    .spectableinput {
        text-align: center;
    }

    .f {
        border-color: #b94a48;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    }

    .table.table-bordered tr th, .table.table-bordered tr td {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    select {
        padding: 3px 4px;
        height: 30px;
    }

    /* .tags {
        display: inline-block;
        padding: 4px 6px;
        color: #777;
        vertical-align: middle;
        background-color: #FFF;
        border: 1px solid #D5D5D5;
        width: 206px;
    } */
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <form class="form-horizontal m-t" id="signupForm">
                        <table class="table table-bordered table-condensed">
                            <tbody>
                            <tr>
                                <th class="required" style="text-align: right;"><em class="gg-star">*</em>公司/个人:</th>
                                <td><input id="name" name="name" class="form-control" type="text"/></td>
                            </tr>
                            <tr>
                                <th class="required" style="text-align: right;"><em class="gg-star">*</em>联系人:</th>
                                <td><input id="contacts" name="contacts" class="form-control" type="text"></td>
                            </tr>

                            <tr>
                                <th class="required" style="text-align: right;"><em class="gg-star">*</em>手机号码:</th>
                                <td><input id="mobile" name="mobile" class="form-control" type="text" placeholder="手机号码同时也是后台登录帐号"></td>
                            </tr>
                            <!--<tr>-->
                                <!--<th class="required" style="text-align: right;"><em class="gg-star">*</em>登录帐户名:</th>-->
                                <!--<td><input id="loginName" name="loginName" class="form-control" type="text"/></td>-->
                            <!--</tr>-->
                            <!--<tr>-->
                                <!--<th class="required" style="text-align: right;"><em class="gg-star">*</em>登录密码:</th>-->
                                <!--<td><input id="loginPassword" name="loginPassword" class="form-control" type="text"/></td>-->
                            <!--</tr>-->
                            <tr>
                                <th class="required" style="text-align: right;"><em class="gg-star">*</em>地区</th>
                                <td colspan="3">
                                    <div class="gg-formDetail gg-font0" data-toggle="distpicker">
                                        <div class="gg-area">
                                            <select class="form-control" id="province" name="province" onchange="getCity()"
                                                    data-province="----选择省----">
                                            </select>
                                        </div>
                                        <div class="gg-area">
                                            <select class="form-control" id="city" name="city" data-city="----选择市----">
                                            </select>
                                        </div>
                                        <!--<div class="gg-area">-->
                                            <!--<select class="form-control" id="area" name="area"-->
                                                    <!--data-district="&#45;&#45;&#45;&#45;选择区&#45;&#45;&#45;&#45;">-->
                                            <!--</select>-->
                                        <!--</div>-->
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <th class="required" style="text-align: right;"><em class="gg-star">*</em>详细地址:</th>
                                <td colspan="3"><input id="address" name="address" class="form-control" type="text"/>
                                </td>
                            </tr>
                            <tr>
                                <th class="required" style="text-align: right;"><em class="gg-star">*</em>分润比例(%:</th>
                                <td colspan="3"><input id="profitRate" name="profitRate" class="form-control" type="number" placeholder="分润比例（百分比"/>
                                </td>
                            </tr>
                            <tr>
                                <th class="required" style="text-align: right;"><em class="gg-star">*</em>绑定会员,绑定后不能修改:</th>
                                <td>
                                    <input id="memberId" name="memberId" class="form-control" type="hidden">
                                    <input id="memberName" name="memberName" placeholder="点击绑定会员"
                                           class="form-control" type="text" readonly
                                           onclick="relateAgentMember()">
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <div class="form-group text-center">
                            <div class="col-sm-8 col-sm-offset-2">
                                <button type="submit" class="btn btn-primary"><i class="fa fa-check"></i>提交</button>
                                <div class="btn btn-danger" onclick="closeDow()"><i class="fa fa-remove"></i> 关闭</div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

</div>
<div th:include="include::footer"></div>

<script type="text/javascript" src="/js/appjs/product/AreaData.js"></script>
<script type="text/javascript" src="/js/appjs/branchOffice/manage/add.js"></script>
<script type="text/javascript">
    $(function () {
        //从js数据中获取地区
        $("#province").append("<option value=''>请选择省</option>");
        for (var i = 0; i < provs_data.length; i++) {
            console.log(provs_data[i]);
            $("#province").append("<option value='"+provs_data[i].text+"' data-code='"+provs_data[i].value+"' >"+provs_data[i].text+"</option>");
        }
    });
    function getCity(){
        $("#city").empty();
        $("#city").append("<option value=''>请选择市</option>");
        //获取省级下的所有市
         var province_code=$("#province option:selected").attr("data-code");
        if (citys_data[province_code].length > 0) {
            var citys = citys_data[province_code];
            for (var j = 0; j < citys.length; j++) {
                $("#city").append("<option value='" + citys[j].text + "' data-code='" + citys[j].value + "' >" + citys[j].text + "</option>");
            }
        }
    }
    function closeDow() {
        var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
        parent.layer.close(index);
    }


    function onSelectImgBtnClick(inputId, imgId) {
        layer.open({
            id:'selectImg',
            type : 2,
            title : '选择图片',
            maxmin : true,
            shadeClose : false,
            area : [ '60%', '70%' ],
            content : '/platform/config/selectImg/' + inputId +"/"+ imgId // iframe的url
        });
    }

    /**
     * 关联会员
     */
    function relateAgentMember() {
    	// var branchOfficeId = $("*[name='branchOfficeId']").val();
    	layer.open({
    		id : "relation_member",
    		type : 2,
    		title : "关联会员",
    		maxmin : true,
    		shadeClose : true,
    		area : [ '70%', '80%' ],
    		content : "/agent/manage/relateMember"
    	// content: "/mall/supply/relateMember?branchOfficeId=" + branchOfficeId
    	})
    }

    
    /**
     * 加载图片URL
     * @param inputId
     * @param imgId
     * @param url
     */
    function loadImgUrl(inputId, imgId, url) {
        $('#'+inputId +'').val(url);
        $('#'+imgId +'').attr('src', url);
    }

    /**
     * 设置会员信息
     *
     * @param memberId
     * @param memberName
     */
    function loadMemberInfo(memberId, memberName) {
        $('#memberId').val(memberId)
        $('#memberName').val(memberName)
    }
</script>
</body>
</html>
